<template>
  <avue-crud
    ref="crudRef"
    v-model="form"
    :option="option"
    @row-save="rowSave"
    @row-update="rowUpdate"
    @row-del="rowDel"
    @on-load="getList"
    :data="data"
  >
    <template #menu="{ row }">
      <el-button size="small"
        ><router-link
          :to="'/servers/containers?container_id=' + row.container_id"
          >管理</router-link
        ></el-button
      >
      <SetMenu :id="row.container_id"></SetMenu>
    </template>
  </avue-crud>
</template>
<script setup>
import SetMenu from "./SetMenu.vue";
import { getUserContainer } from "@/api";
import { ref, getCurrentInstance } from "vue";
//获取this
const option = ref(null);
const data = ref(null);
const form = ref({});

option.value = {
  header: false,
  index: false,
  delBtn: false,
  editBtn: false,
  minWidth: 150,
  menuWidth: 250,
  column: [
    {
      label: "ID",
      prop: "container_id",
      minWidth: 250
    },
    {
      label: "购买价格",
      prop: "pay"
    },
    {
      label: "到期时间",
      prop: "become_time",
      minWidth: 150
    },
    {
      label: "所属套餐",
      prop: "plan"
    },
    {
      label: "所属服务器",
      prop: "server"
    }
  ]
};
data.value = [
  {
    name: "张三",
    sex: 12
  },
  {
    name: "李四",
    sex: 13
  }
];
function getList() {
  getUserContainer().then(res => {
    data.value = res.data.data || [];
    console.log(res);
  });
}
function rowSave(row, done, loading) {
  done(row);
}
function rowDel(row, index, done) {
  done(row);
}
function rowUpdate(row, index, done, loading) {
  done(row);
}
</script>
